<template>
	<view class="searchList">
		<view class="top1">
			<view class="search">
				<input type="text" v-model="key" confirm-type="search" @confirm="search" />
				<icon type="search" size="18"></icon>
			</view>
			<view class="screen">
				<view class="item " :class="{active: index == currentIndex}" @click="filter(index)" v-for="(item,index) in filterList"
				 :key="index">{{item}}</view>
			</view>
		</view>
		<view class="content">
			<view class="goods" v-for="(item,index) in goodsList" :key="index">
				<view class="left">
					<image :src="item.goods_big_logo" mode=""></image>
				</view>
				<view class="right">
					<view class="title">
						{{item.goods_name}}
					</view>
					<view class="bottom">
						￥ <text class="num">{{item.goods_price}}.00</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filterList: ['综合', '销量', '价格'],
				currentIndex: 0,
				goodsList: [],
				key: '',
				pagenum: 1,
				pagesize: 10,
				total: undefined,
				finished: true
			}
		},
		onLoad(options) {
			this.key = options.key
			console.log(this.key)
			this.getGoodsList()
		},
		methods: {
			filter(index) {
				this.currentIndex = index
			},
			search(e) {
				//  获取输入框关键字
				this.key = e.detail.value
				// 重置数据
				this.pagenum = 1
				this.pagesize = 10
				this.total = undefined
				// 发送请求
				this.getGoodsList()
				// 可以直接调用下拉刷新的方法   this.onPullDownRefresh  需要进行封装 但不建议使用
			},
			getGoodsList() {
				if (this.finished == false) {
					return
				}
				this.finished = false

				this.$request({
					url: `/api/public/v1/goods/search`,
					query: this.key,
					pagenum: this.pagenum,
					pagesize: this.pagesize,
					needloading: false
				}).then(res => {
					this.goodsList = [...this.goodsList, ...res.goods]
					this.total = res.total
					this.finished = true
				})
			}
		},
		// 上拉加载
		onReachBottom() {
			if (this.goodsList.length >= this.total) {
				uni.showToast({
					title: '我是有底限的'
				})
				return
			}
			this.pagenum++
			this.total = undefined
			this.getGoodsList()
		},
		// 下拉数据
		onPullDownRefresh() {
			this.pagenum = 1
			this.goodsList = []
			this.total = undefined
			this.getGoodsList()
		}
	}
</script>

<style lang="less">
	.searchList {
		.top1{
			position: sticky;
			left: 0;
			top: 0;
			background-color:#eee;
			.search {
				padding: 30rpx 16rpx;
				// background-color: #eee;
				position: relative;
			
				>input {
					height: 60rpx;
					padding-left: 80rpx;
					border-radius: 5rpx;
					background-color: #fff;
				}
			
				>icon {
					position: absolute;
					top: 50%;
					left: 48rpx;
					transform: translateY(-50%);
				}
			}
			
			.screen {
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #dfdfdf;
				background-color: #fff;
				.item {
					width: 33.33%;
					line-height: 100rpx;
					text-align: center;
				}
			
				.active {
					color: #eb4956;
				}
			}
			
		}
		.content {
			.goods {
				display: flex;
				height: 200rpx;
				padding: 30rpx 0;
				margin: 0 20rpx;
				border-bottom: 1rpx solid #dfdfdf;

				.left {
					width: 200rpx;
					height: 200rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					flex: 1;
					margin-left: 30rpx;
					position: relative;

					.title {
						font-size: 14px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.bottom {
						color: #eb4450;
						font-size: 12px;
						left: 0;
						bottom: 0;
						position: absolute;

						.num {
							font-size: 16px;
							font-weight: 700;
						}
					}
				}
			}
		}
	}
</style>
